<template>
	<view>
		<view>
			<checkBranch @updateCampus="updateCampus" />
			<Search @search='onSearch' :placeholder='type===1?"请输入科室名称搜索":"请输入医生或科室名称搜索"' />
		</view>
		<view class="depart-list">
			<view class="depart-list-main">
				<view class="detail-list">
					<view class="left" v-if="!name">
						<view class="item-dept" :class="{active: active == index}" v-for="(item,index) in listParent"
							:key="index">
							<view @click="checkItem(item, index)" class="item-left">{{item.name}}</view>
							<!-- <view v-else @click="toPage(item)">{{item.deptname}}</view> -->
						</view>
					</view>
					<view class="right" v-if="showItems.length>0">
						<view v-for="(child,indexChild) in showItems" :key="indexChild" @click="toPage(child)">
							<view class="item-right" v-if="child.hasChildDepartment==1">
								<view>
									{{child.name}}
								</view>
								<view>
									<u-icon name="photo"></u-icon>
								</view>
							</view>
							<view class="item-right" v-else>{{child.name}}</view>
						</view>
					</view>
				</view>

			</view>

		</view>
		<LoadVue :load="load"></LoadVue>
	</view>
</template>

<script>
	import Search from '@/components/Search/searchBtn.vue'
	import {
		getDeptList,
		departmentNum
	} from '@/api/department.js'
	import checkBranch from '../../components/checkBranch/checkBranch.vue'
	import {
		dictionarySelect
	} from '../../api/dictionary';
	import {
		mapGetters,
	} from 'vuex';
	import {
		getDateFromFutureDay
	} from '../../utils/assist';
	export default {
		components: {
			Search,
			checkBranch,
		},
		data() {
			return {
				type: 1, // 1 科室介绍 2 医生介绍
				name: null,
				departList: [],
				departListAll: [],
				doctorList: [],
				selectShow: false,
				active: 0,
				showItems: [], //子科室
				tempAllList: [], //临时存放所有数据
				campusCode: '',
				listParent: [],
				hasChildDepartment: "", //搜索查询时，直接查询最后一级的科室即可
				load: false,
			}
		},
		computed: {
			...mapGetters([
				'userInfo', "currentHospitalInfo"
			])
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type || 1
			}
		},
		mounted() {
			this.name = uni.getStorageSync("departmentName")
			// 在线问诊跳转带过来科室名称查询，用完后需要设置清空
			uni.setStorageSync("departmentName", '')

			this.initData()
		},
		methods: {
			// 更新了院校选择
			updateCampus(val) {
				this.departListAll = []
				this.departList = []
				this.campusCode = val
				this.initData()
			},
			initData() {
				this.load = true;
				if (this.name) {
					this.hasChildDepartment = '0'
				} else {
					this.hasChildDepartment = ''
				}
				let params = {
					name: this.name,
					departmentType: "01",
					campusCode: this.currentHospitalInfo.code,
					hasChildDepartment: this.hasChildDepartment,
					orderBy: "sort"
				}
				this.departList = []
				this.doctorList = []
				getDeptList(params).then(data => {
					this.load = false;
					let res = data || [];
					this.departListAll = res;
					if (this.name) {
						this.showItems = this.departListAll
					} else {
						this.getDepartmentParentName(0)
					}
				}).catch(e => {})

			},
			getDepartmentParentName(e) {
				this.departList = []
				let map = new Map();
				for (let obj of this.departListAll) {
					// 如果parentCode为空，则表示只有一级菜单
					if (!obj.parentCode) {
						map.set(obj.code, obj)
					}
				}
				this.listParent = [...map].map(item => item[1])
				this.checkItem(this.listParent[0], 0)
			},
			checkItem(e, index) {
				let child = []
				this.departListAll.forEach(item => {
					if (item.parentCode == e.code) {
						child.push(item)
					}
				})
				this.showItems = child;
				this.active = index
			},
			onSearch(val) {
				this.name = val
				// 只需要检索当前院区的科室即可，不需要远程
				this.initData()
			},
			toPage(value) {
				uni.setStorageSync("deptItem", value)
				uni.navigateTo({
					url: `/pages/registerPblist/index?deptCode=${value.code}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.detail-list {
		display: flex;
		flex: 1;
		// border-radius: 8px;
		overflow: hidden;
		min-height: calc(100vh - 100px);

		.left {
			width: 274upx;
			height: calc(100vh - 100px);
			background-color: #F6F6F6;
			overflow-y: auto;

			.item-dept {
				line-height: 44upx;
				// border-bottom: 1px solid rgba(0,0,0,0.12);
				// padding: 24upx 0 24upx 20upx;
				background-color: #F6F6F6;
				position: relative;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28upx;
				color: rgba(0, 0, 0, 0.4);
				line-height: 44upx;

				&.active {
					color: $theme-color;
					background-color: #FFF;

					&:before {
						content: '';
						display: block;
						position: absolute;
						width: 6upx;
						height: 64upx;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						background: $theme-color;
						border-radius: 4upx 0 0 4upx;
					}
				}
			}
		}

		.right {
			height: calc(100vh - 100px);
			flex: 1;
			// padding: 0 32upx 96upx;
			background-color: #FFF;
			overflow: auto;


		}
	}

	.item-dept {
		// display: flex;
		// justify-content: flex-start;
		// font-family: PingFang SC, PingFang SC;
		// font-weight: 400;
		// font-size: 28upx;
		// color: rgba(0, 0, 0, 0.7);
		// line-height: 44upx;
		// border-bottom: 1px solid rgba(0, 0, 0, 0.12);


	}

	.item-left {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28upx;
		line-height: 44upx;
		color: rgba(0, 0, 0, 0.7);
		border-bottom: 1px solid rgba(0, 0, 0, 0.12);
		padding: 10px;
	}

	.item-right {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28upx;
		line-height: 44upx;
		color: rgba(0, 0, 0, 0.7);
		border-bottom: 1px solid rgba(0, 0, 0, 0.12);
		padding: 10px;
	}

	.depart-list-main {
		height: calc(100vh - 100px);
		background-color: $uni-bg-color;
		overflow: scroll;
	}
</style>